<template>
	<div class="news">
		<router-link v-for="item in 5" :key="item" :to="{path: '/news_info?id=' + item}">
			<div class="news-item">
				<h3>测试新闻标题</h3>
				<p>测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容测试新闻内容</p>
				<div class="news-info">
					<span>发布日期: 2018-1-1</span>
				</div>
			</div>
		</router-link>
	</div>
</template>

<script>
	export default {
		name: 'news',
		data() {
			return {
				newsList: []
			}
		}
	}
</script>

<style lang="less">
	.news {
		height: 100%;
		background-color: #EFEFEF;
		.news-item {
			background-color: #FFFFFF;
			margin-bottom: 0.2rem;
			padding: 0.2rem;
			h3 {
				margin: 0;
				font-weight: normal;
				font-size: 0.28rem;
			}
			p {
				font-size: 0.26rem;
				margin-top: 0.1rem;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.news-info {
				font-size: 0.26rem;
				margin-top: 0.1rem;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>